<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<el-button type="primary" @click="openAppraise(null)" >添加考核</el-button>
				<el-table :data="appraises" border highlight-current-row style="width: 100%">
					<el-table-column prop="student.studentName" label="所属学生">
					</el-table-column>
					<el-table-column prop="course.courseTitle" label="所属课程">
					</el-table-column>
					<el-table-column prop="target.targetTitle" label="目标项">
					</el-table-column>
					<el-table-column prop="appraiseDate" label="考核日期">
					</el-table-column>
					<el-table-column prop="appraiseRemark" label="备注">
					</el-table-column>
					<!--<el-table-column prop="appraiseScore" label="考核项汇总得分">
					</el-table-column>-->
					<el-table-column prop="appraiseTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showRecord(scope.row)" type="text" size="small">查看考核项</el-button>
					        <el-button @click="openAppraise(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delAppraise(scope.row.appraiseId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<el-button type="primary" @click="openRecord(null)" >添加考核项</el-button>
				<el-table :data="records" border highlight-current-row v-loading="loading" style="width: 100%">
					<el-table-column prop="recordTitle" label="考核项">
					</el-table-column>
					<el-table-column prop="recordScore" label="考核项分数">
					</el-table-column>
					<el-table-column prop="recordWeight" label="考核项权重">
						<template slot-scope="scope">
							{{scope.row.recordWeight}}%
						</template>
					</el-table-column>
					<el-table-column prop="recordMark" label="当前打分">
					</el-table-column>
					<!--<el-table-column label="权重后单项得分">
						<template slot-scope="scope">
							{{scope.row.recordScore * (scope.row.recordWeight / 100)}}
						</template>
					</el-table-column>-->
					<el-table-column label="操作" width="120px">
						<template slot-scope="scope">
					        <el-button @click="openRecord(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delRecord(scope.row.recordId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog
		  title="考核设置"
		  :visible.sync="appraiseForm.visible"
		  width="30%">
		  <el-form :model="appraiseForm" :rules="appraiseRules" ref="appraiseForm" label-width="100px">
			  <el-form-item label="所属学生" prop="appraiseStudentId">
			    <el-select v-model="appraiseForm.appraiseStudentId" :disabled="(appraiseForm?.appraiseId == '' || appraiseForm?.appraiseId == null)?false:true" filterable placeholder="请选择">
				    <el-option
				      v-for="item in students"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="所属课程" prop="appraiseCourseId" v-show="appraiseForm?.appraiseId == '' || appraiseForm?.appraiseId == null" >
			    <el-select v-model="appraiseForm.appraiseCourseId" @change="changeCourse" filterable placeholder="请选择">
				    <el-option
				      v-for="item in courses"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="所属目标项" prop="appraiseTargetId" v-show="appraiseForm?.appraiseId == '' || appraiseForm?.appraiseId == null" >
			    <el-select v-model="appraiseForm.appraiseTargetId" filterable placeholder="请选择">
				    <el-option
				      v-for="item in targets"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="考核日期" prop="appraiseDate">
			     <el-date-picker v-model="appraiseForm.appraiseDate" type="date" placeholder="选择日期">
			    </el-date-picker>
			  </el-form-item>
			  <el-form-item label="备注" prop="appraiseRemark">
			    <el-input v-model="appraiseForm.appraiseRemark"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeAppraise">取 消</el-button>
		    <el-button type="primary" @click="saveAppraise">保 存</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="考核设置"
		  :visible.sync="recordForm.visible"
		  width="30%">
		  <el-form :model="recordForm" :rules="recordRules" ref="recordForm" label-width="100px">
			  <!--<el-form-item label="所属考核备注">
			    {{selectAppraise?.appraiseRemark}}
			  </el-form-item>-->
			  <!--<el-form-item label="考核项">
			    <el-select v-model="recordForm.recordTargetId" @change="changeTarget"  filterable placeholder="请选择">
				    <el-option
				      v-for="item in targets"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>-->
			  <el-form-item label="考核项" prop="recordTitle">
			    <el-input v-model="recordForm.recordTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="考核分" prop="recordScore">
			    <el-input v-model="recordForm.recordScore"></el-input>
			  </el-form-item>
			  <el-form-item label="考核权重" prop="recordWeight">
			    <el-input v-model="recordForm.recordWeight">
					<template slot="append">%</template>
				</el-input>
			  </el-form-item>
			  <el-form-item label="打分" prop="recordMark">
			    <el-input v-model="recordForm.recordMark"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeRecord">取 消</el-button>
		    <el-button type="primary" @click="saveRecord">保 存</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		appraises: [], 
		scores: [], 
		records: [],
		courses: [],
		targets: [],
		target: null,
		students: [],
		selectAppraise: null,
		loading: false,
		appraiseForm:{
			visible: false,
			appraiseId: '',
			appraiseStudentId: '',
			appraiseCourseId: '',
			appraiseTargetId: '',
			appraiseDate: '',
			appraiseRemark: ''
		},
		appraiseRules: {
          appraiseStudentId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          appraiseCourseId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          appraiseTargetId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          appraiseDate: [
            { required: true, message: '请选择', trigger: 'blur' }
          ]
        },
		recordForm:{
			visible: false,
			recordId: '',  
			recordAppraiseId: '',  
			recordTitle: '',  
			recordScore: '', 
			recordWeight: '', 
			recordMark: ''
		},
		recordRules: {
          recordAppraiseId: [
            { required: true, message: '没有选择考核', trigger: 'blur' }
          ],
          recordTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          recordScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          recordWeight: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          recordMark: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ]
        },
	}
	let vueMethods = {
		getScores() {
			let that = this
			postRequst('/admin/getScores', null).then(function (resp) {
				that.scores = resp.rows
			})
		},
		getCourses() {
			let that = this
			postRequst('/admin/getCourses', {}).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(course of resp.rows){
						that.courses.push({
							label: course.courseTitle,
							value: course.courseId
						})
					}
				}
			})
		},
		getTargets(courseId) {
			let that = this
			postRequst('/admin/getTargets', {courseId: courseId}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					that.targets = []
					for(target of resp.rows){
						that.targets.push({
							label: target.targetTitle,
							value: target.targetId
						})
					}
				}
			})
		},
		getTarget(targetId) {
			let that = this
			postRequst('/admin/getTarget', {targetId: targetId}, true).then(function (resp) {
				that.target = resp
			})
		},
		getStudent() {
			let that = this
			postRequst('/admin/getStudents', {active: 1}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(student of resp.rows){
						that.students.push({
							label: student.studentName,
							value: student.studentId
						})
					}
				}
			})
		},
		getAppraises() {
			let that = this
			postRequst('/admin/getAppraises', that.query).then(function (resp) {
				that.appraises = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectAppraise = resp.rows[0]
					//that.recordForm.recordAppraiseId = resp.rows[0].appraiseId
					//that.getTargets(that.selectAppraise.appraiseCourseId)
					that.getRecords()
				}
			})
		},
		getRecords() {
			let that = this
			that.recordForm.recordAppraiseId = that.selectAppraise.appraiseId
			postRequst('/admin/getRecords', {appraiseId: that.selectAppraise.appraiseId}, true).then(function (resp) {
				that.records = resp.rows
			})
			that.loading = false
		},
		showRecord(row){
			let that = this
			that.loading = true
			that.selectAppraise = row
			that.getRecords()
		},
		openAppraise(row){
			let that = this
			if(row){
				that.appraiseForm.appraiseId = row.appraiseId
				that.appraiseForm.appraiseStudentId = row.appraiseStudentId
				that.appraiseForm.appraiseCourseId = row.appraiseCourseId
				that.appraiseForm.appraiseTargetId = row.appraiseTargetId
				that.appraiseForm.appraiseDate = row.appraiseDate
				that.appraiseForm.appraiseRemark = row.appraiseRemark
				that.getTargets(row.appraiseCourseId)
			}else{
				that.appraiseForm.appraiseId = ''
				that.appraiseForm.appraiseStudentId = ''
				that.appraiseForm.appraiseCourseId = ''
				that.appraiseForm.appraiseTargetId = ''
				that.appraiseForm.appraiseDate = ''
				that.appraiseForm.appraiseRemark = ''
			}
			that.appraiseForm.visible = true
		},
		closeAppraise() {
			this.$refs['appraiseForm'].resetFields();
			this.appraiseForm.visible = false
		},
		openRecord(row){
			let that = this
			if(!that.selectAppraise){
				that.$message({message: '请先选择考核', type: "warning"});
				return ;
			}
			if(row){
				that.recordForm.recordId = row.recordId
				//that.recordForm.recordAppraiseId = row.recordAppraiseId
				that.recordForm.recordTitle = row.recordTitle
				that.recordForm.recordScore = row.recordScore
				that.recordForm.recordWeight = row.recordWeight
				that.recordForm.recordMark = row.recordMark
				//that.getTarget(row.recordTargetId)
			}else{
				that.recordForm.recordId = ''
				//that.recordForm.recordAppraiseId = ''
				that.recordForm.recordTitle = ''
				that.recordForm.recordScore = ''
				that.recordForm.recordWeight = ''
				that.recordForm.recordMark = ''
			}
			that.recordForm.visible = true
			
		},
		closeRecord() {
			this.$refs['recordForm'].resetFields();
			this.recordForm.visible = false
		},
		saveAppraise() {
			let that = this
			this.$refs['appraiseForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveAppraise', that.appraiseForm).then(function (resp) {
						if(resp.status == 0){
							that.getAppraises()
							that.appraiseForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveRecord() {
			let that = this
			this.$refs['recordForm'].validate((valid) => {
				if (valid) {
					if(that.recordForm.recordMark*1 > that.recordForm.recordScore*1){
						that.$message({message: '打分分数不能高于考核分值', type: "error"});
						return false
					}
					postRequst('/admin/saveRecord', that.recordForm).then(function (resp) {
						if(resp.status == 0){
							//that.getAppraises()
							that.getRecords()
							that.recordForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delAppraise(appraiseId) {
			let that = this
			postRequst('/admin/delAppraise', {appraiseId: appraiseId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getAppraises()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		delRecord(recordId) {
			let that = this
			postRequst('/admin/delRecord', {recordId: recordId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getRecords()
					that.getAppraises()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		changeCourse(nowVal){
			let that = this
			that.getTargets(nowVal)
			that.appraiseForm.appraiseTargetId=''
		},
		changeTarget(nowVal){
			let that = this
			//that.getTarget(nowVal)
		}
	}
	function vueCreated() {
		let that = this
		that.getCourses()
		that.getStudent()
		that.getAppraises()
	}

	// 初始化VUE
	try{
		new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
	}catch(e){
		console.log(e)
	}
</script>

</html>